<template>
  <!-- {{ column }} -->
  <arco-table :columns="columns"
           :data="tableData"
           :pagination="false"
           :scrollbar="true"
           :scroll="scroll"
           :rowClass="rowClassName"
           :hoverable="true"
           @row-click="rowClick">
    <template #app_name="{ record }">
      {{ record.app_name }}
    </template>
    <template #app_num="{ record }">
      {{ record.app_num }}
    </template>
    <template #vcpu_total="{ record }">
      {{  addThousandsSeparator(record.vcpu_total) }}
    </template>
    <template #cpu_usage="{ record }">
      {{ record.cpu_usage }}%
    </template>
    <template #memory_available="{ record }">
      {{  addThousandsSeparator(record.memory_available) }}
    </template>
    <template #memory_usage="{ record }">
      {{ record.memory_usage }}%
    </template>
    <template #disk_total="{ record }">
      {{  addThousandsSeparator(record.disk_total) }}
    </template>
    <template #disk_used_percent="{ record }">
      {{ record.disk_used_percent }}%
    </template>

  </arco-table>
  <!-- <arco-table :columns="columns"
             :data="tableData"> -->
  <!-- </arco-table> -->

</template>
  
  <script setup>
import { ref, reactive } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import VptSelectBlock from "@/components/form/vpt-select-block/index.vue";
import vptBaseTable1001 from "@/components/vpt-base-table-1001/index.vue";
import vptPalnTag from "@/components/vpt-base-tag";
import { addThousandsSeparator } from "@/utils/formatter.js";
import {
  getAppListData
} from "@/api/mockApi/application.js";
const props = defineProps({
  height: { type: String, default: "" },
  defaultTabs: { type: String, default: "" },
  chartType: { type: String, default: "init" },
  tableData: { type: Array, default: [] },
  column: {
    type: Array, default: []
  },
});

const columns = [
  {
    title: "应用名称",
    slotName: "app_name",
    align: "left",
    width: 180,
  },

  {
    title: "主机数",
    slotName: "app_num",
    align: "right",
    width: 70,
  },
  {
    title: "CPU(核)",
    slotName: "vcpu_total",
    align: "right",
    width: 70,
  },
  {
    title: "CPU使用率",
    slotName: "cpu_usage",
    align: "right",
    width: 70,
  },
  {
    title: "内存(GB)",
    slotName: "memory_available",
    align: "right",
    width: 100,
  },
  {
    title: "内存使用率",
    slotName: "memory_usage",
    align: "right",
    width: 155,
  },
  {
    title: "存储(GB)",
    slotName: "disk_total",
    align: "right",
    width: 80,
  },
  {
    title: "存储使用率",
    slotName: "disk_used_percent",
    align: "right",
    width: 80,
  },
];
//   const tableData=[]
const data = reactive([]);

const tabOption = [
  { id: "0", name: "全部" },
  { id: "1", name: "告警" },
  { id: "2", name: "提示" },
  { id: "3", name: "正常" },
];

const changeTab = (value) => {
  emit("changeTab", value.id);
};

const scroll = {
  y: "4.6rem",
};
//   let columns = reactive(props.column);

const rowClassName = (record, index) => {
  if (record.process_status == 2) {
    return "row-warn-status";
  } else if (record.process_status == 1) {
    return "row-danger-status";
  }
  return "111";
};

const getCellValue = (value) => {
  var parts = value.split("/");
  parts = parts.map(function (item) {
    return addThousandsSeparator(item);
  });
  return parts.join("/");
};

const rowClick = (record, index) => {

  emit("row-click", record);
};
const emit = defineEmits(["changeTab", "row-click"]);
  </script>
  
  <style lang="less" scoped>
@import url("../../../../assets/style/table.less");
:deep(.arco-table-cell.arco-table-cell-align-left) {
  justify-content: center !important;
}
:deep(.arco-table-cell.arco-table-cell-align-right) {
  justify-content: center !important;
}
:deep(.seamless-scroll) {
  flex: 1;
  overflow: hidden;

  .arco-table-container {
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid rgba(22, 59, 104, 0.5) !important;
  }
}

.auto-scroll-box {
  display: flex;
  flex-direction: column;
  height: 100%;

  .vpt-table-header {
    :deep(.arco-table-tfoot) {
      box-shadow: none;
    }

    :deep(.arco-table-body) {
      display: none;
    }
  }

  .vpt-table-wrapper {
    :deep(.arco-table-header) {
      display: none;
    }
  }
}

.name-text {
  display: block;
  width: 1.4rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zmbug .vpt-em-red {
  color: #f53f3f !important;
}

// .yzbug .vpt-em-organge {
//   color: #ff7d00 !important;
// }

.ybbug .vpt-em-organge {
  color: #ffc400 !important;
}

.ybbug .vpt-em-organge {
  color: #ffc400 !important;
}

:deep(.arco-table-tr:hover) {
  // background: url("../../../../assets/img/theme3/row.png") no-repeat !important;
  background-size: 100% 98% !important;
}
:deep(.arco-table-td) {
  background: none !important;
}
</style>